<template>
    <div class="reveal-msg-part">
        <div class="center-msg-part">
            <div class="msg-title-part">
                <span style="text-align: left">{{revealMsgTitle}}</span>
                <span v-if="clickType==='repair'||clickType==='inst'||clickType==='phone'||clickType==='urgent'||clickType==='fault'||clickType==='faultDes'"
                      style="color: #ff3b30;font-size: 1.2em;text-align: center;">*</span>
            </div>
            <input v-if="contentType === 'entry'&&isEditState===true"
                    class="msg-content-entry-part"
                    slot="slot-content-part"
                    type="text"
                    placeholder="请输入"
                    v-model="revealContent"
                    maxlength="20">
            <input v-if="contentType === 'entry'&&isEditState===false"
                    readonly="readonly"
                    class="msg-content-entry-part"
                    slot="slot-content-part"
                    type="text"
                    placeholder="请输入"
                    v-model="revealContent"
                    maxlength="20">
            <span  v-else-if="contentType === 'text'"
                   v-bind:class="classRevealMsgObject"
                   slot="slot-content-part">{{revealContent}}</span>
            <span v-else-if="contentType === 'textarea'"
                      class="msg-content-textarea-part"
                      slot="slot-content-part"
                      v-html="revealContent"></span>
            <!--<textarea v-else-if="contentType === 'textarea'"-->
                      <!--class="msg-content-textarea-part"-->
                      <!--slot="slot-content-part"-->
                      <!--v-model="revealContent"-->
                      <!--readonly="true"></textarea>-->
            <slot name="slot-right-show" class="show-right-slot-part"/>
        </div>
        <slot name="slot"/>
    </div>
</template>

<script>
    export default {
        name: "revealMsgComponent",
        data() {
            return {
                insideClickType: '',
                insideRevealContent: this.revealContent,
            }
        },
        props: {
            revealMsgTitle: {
                type: String,
                default() {
                    return ''
                }
            },
            revealContent: {
                type: String,
                default() {
                    return ''
                }
            },
            contentType: {
                type: String,
                default() {
                    return ''
                }
            },
            clickType: {
                type: String,
                default() {
                    return ''
                }
            },
            isEditState: {
                type: Boolean,
                default() {
                    return true
                }
            }
        },
        computed: {
            classRevealMsgObject: function () {
                if (this.clickType === 'inst' || this.clickType === 'urgent' || this.clickType === 'fault'
                    || this.clickType === 'company') {
                    return 'msg-content-blue-text-part';
                } else {
                    return 'msg-content-text-part';
                }
            }
        },
        created() {
            this.insideClickType = this.clickType;
            this.insideRevealContent = this.revealContent;
        },
        watch: {
            revealContent: function (newValue,oldValue) {
                // if (this.insideClickType === 'deviceCode') {
                //     if (newValue.length>=16 && newValue.length<=20) {
                //         console.log(newValue);
                //         console.log("deviceCodeChange");
                //         this.$emit('deviceCodeChange',{code: newValue})
                //     }
                // }
                this.$emit('deviceCodeChange',{clickType: this.insideClickType,code: newValue})
            },
        }
    }
</script>

<style lang="scss">
    .reveal-msg-part {
        width: 100%;
        background-color: #ffffff;

        .center-msg-part {
            display: flex;/*Flex布局*/
            display: -webkit-flex; /* Safari */
            align-items: center;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;

            /*修改Input标签的placeholder文字颜色*/
            input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
                color: #9a9a9a;
            }
            input:-moz-placeholder, textarea:-moz-placeholder {
                color:#9a9a9a;
            }
            input::-moz-placeholder, textarea::-moz-placeholder {
                color:#9a9a9a;
            }
            input:-ms-input-placeholder, textarea:-ms-input-placeholder {
                color:#9a9a9a;
            }

            .msg-title-part {
                width: 45%;
                font-size: 1.2em;
                text-align: left;
                padding-left: 0.4rem;
            }

            .msg-content-entry-part{
                border: 0;
                width: 50%;
                font-size: 1.2em;
                text-align: left;
                color: #9a9a9a;
            }

            .msg-content-text-part{
                /*background: #ffffff;*/
                /*overflow: hidden;*/
                /*display: table-cell;*/
                /*align-items: center;*/
                /*justify-content: center;*/
                /*vertical-aglin:middle;*/
                /*justify-items: center;*/
                width: 50%;
                height: 0.4rem;
                font-size: 1.2em;
                text-align: left;
                color: #9a9a9a;
            }

            .msg-content-blue-text-part {
                width: 50%;
                height: 0.4rem;
                font-size: 1.2em;
                text-align: left;
                color: #3cc8a8;
            }

            .msg-content-textarea-part {
                width: 50%;
                border: 0;
                text-align: left;
                color: #9a9a9a;
                padding-top: 0.1rem;
                padding-bottom: 0.1rem;
            }

            .show-right-slot-part {
                width: 5%;
            }

        }
    }
</style>